<template>
	<!-- Vue ECharts 组件的模板 -->
	<div>
		<!-- 绑定ECharts组件，并传入option和样式 -->
		<v-chart ref="chart" :option="chartOption" style="width: 100%; height: 300px;"></v-chart>
	</div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import { use } from 'echarts/core'; // 引入ECharts核心函数
import { CanvasRenderer } from 'echarts/renderers'; // 引入渲染器
import { LineChart } from 'echarts/charts'; // 引入图表类型
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components'; // 引入组件
import VChart from 'vue-echarts'; // 引入Vue ECharts组件
import axios from 'axios'; // 引入axios

// 注册所需的ECharts模块
use([
	CanvasRenderer,
	LineChart,
	GridComponent,
	TooltipComponent,
	TitleComponent,
	LegendComponent
]);

export default defineComponent({
	components: {
		VChart
	},
	data() {
		return {
			data: [],
		}
	},
	setup() {
		const chart = ref(null); // Vue ref用于保存ECharts实例
		const chartOption = ref({
			// 设置图表大小，占满整个容器
			grid: {
				left: '15%',
				right: '5%',
				top: '10%',
				bottom: '25%',
			},
			// 添加图例配置
			legend: {
				left: 180,
				bottom: 0, // 将图例放在图表下方
				data: ['UPF-2流量'], // 图例项的名称
				textStyle: {
					color: '#fff', // 图例文字颜色
					fontSize: 22, // 图例文字大小
					fontWeight: 'bold',
				},
			},
			tooltip: {
				trigger: 'axis', // 提示框触发类型
				formatter: function (params) { // 提示框的格式化函数
					const date = new Date(params[0].name); // 根据名称解析时间
					let month = (date.getMonth() + 1).toString().padStart(2, '0');
					let ddate = date.getDate().toString().padStart(2, '0');
					let hours = date.getHours().toString().padStart(2, '0');
					let minutes = date.getMinutes().toString().padStart(2, '0');
					let seconds = date.getSeconds().toString().padStart(2, '0');
					let tooltipContent = date.getFullYear() + "/" + month + "/" + ddate + " " + hours + ":" + minutes + ":" + seconds;
					params.forEach(param => {
						tooltipContent += `<br/>${param.seriesName}: ${param.value[1]} Mb`; // 显示日期和值并加上单位
					});
					return tooltipContent;
				},
				axisPointer: {
					animation: false // 关闭指示器的动画效果
				}
			},
			xAxis: {
				type: 'time', // X轴类型为时间
				splitLine: {
					show: false // 不显示分隔线
				},
				axisLabel: {
					formatter: function (value) {
						const date = new Date(value);
						let minutes = date.getMinutes().toString().padStart(2, '0');
						let seconds = date.getSeconds().toString().padStart(2, '0');
						return `${minutes}:${seconds}`;
					},
					textStyle: {
						color: '#fff', // 字体颜色
						fontSize: 12, // 字体大小
						fontWeight: 'bold', // 字体粗细，可以是 'normal', 'bold', 'bolder', 'lighter'，或者数字
						fontStyle: 'italic', // 字体样式，可以是 'normal', 'italic', 'oblique'
					},
				},
			},
			yAxis: {
				type: 'value', // Y轴类型为值
				boundaryGap: [0, '100%'], // 从0到最大值的百分比
				splitLine: {
					show: true // 显示分隔线
				},
				axisLabel: {
					formatter: '{value} Mb/s', // 在Y轴标签上添加单位Mb
					textStyle: {
						color: '#fff',
						fontSize: 12,
						fontWeight: 'bold',
						fontStyle: 'italic',
					},
				}
			},
			series: [
				{
					name: 'UPF-2流量', // 数据系列1名称
					type: 'bar', // 线性图表类型
					showSymbol: true, // 不显示数据点的符号
					smooth: true, // 平滑曲线
					data: [], // 初始化数据为空
					itemStyle: {
						color: '#FFB22C' // 线条颜色
					},
					lineStyle: {
						width: 5 // 线条宽度
					}
				}
			]
		});

		let intervalId = null;
		// 获取数据的函数
		async function fetchData() {
			try {
				let that = this;
				await axios.get("http://10.112.51.79:39898/get_nf_data?nf=" + "upf-2")
					.then(function (res) {
						that.data = res.data.net_io_list;
					});
				const now = new Date();

				// 获取当前时间的最新数据
				const newPoint = {
					name: now.toString(),
					value: [
						now.toISOString(),
						that.data[that.data.length - 1] // 最新的io数据点
					]
				};

				// 检查series数据长度，如果已经有20个数据点，删除第一个，实现平移效果
				if (chartOption.value.series[0].data.length >= 20) {
					chartOption.value.series[0].data.shift();
				}

				// 添加最新的数据点
				chartOption.value.series[0].data.push(newPoint);

				// 获取当前数据的最大值，设置Y轴动态范围
				const maxDataValue = Math.max(...data);
				const roundedMax = Math.ceil(maxDataValue);
				const minDataValue = Math.min(...data);
				const roundedMin = Math.ceil(minDataValue);

				// 更新图表的Y轴最大值
				if (chart.value) {
					chart.value.setOption({
						yAxis: {
							max: 60,
							min: 0
						},
						series: [
							{
								data: chartOption.value.series[0].data
							}
						]
					});
				}
			} catch (error) {
				console.error('Failed to fetch data:', error);
			}
		}

		// 组件挂载时执行的逻辑
		onMounted(() => {
			fetchData(); // 初始获取数据
			intervalId = setInterval(fetchData, 1000); // 每2秒获取一次数据
		});

		// 在组件销毁时清除定时器
		onBeforeUnmount(() => {
			if (intervalId) {
				clearInterval(intervalId); // 清除定时器
				console.log('定时器已清除');
			}
		});

		return {
			chartOption, // 返回图表配置项
			chart // 返回ECharts实例引用
		};
	}
});
</script>

<style scoped></style>